﻿<div class="ui-widget-content">
    <h3>Sortable</h3>
    <p>O sortable transforma elementos HTML (normalmente &lt;ol&gt; ou &lt;ul&gt;) em objetos ordenáveis. Eis os exemplos:</p>
    <div id="tab_sortable">
        <ul>
            <li><a href="#tab_sortable_normal">Normal</a></li>
            <li><a href="#tab_sortable_placeholder">Com placeholder</a></li>
            <li><a href="#tab_sortable_placeholder_force">Placeholder com tamanho</a></li>
            <li><a href="#tab_sortable_grid">Em grade</a></li>
            <li><a href="#tab_sortable_delay">Com tempo de espera</a></li>
            <li><a href="#tab_sortable_distance">Com distância mínima</a></li>
            <li><a href="#tab_sortable_cancel">Excluindo da seleção</a></li>
            <li><a href="#tab_sortable_items">Excluindo da ordenação</a></li>
            <li><a href="#tab_sortable_connect">Conjuntos conectados</a></li>
        </ul>
        <div id="tab_sortable_normal">
            <pre>$("#meu_sortable").sortable();</pre>
            <ol id="sortable_exemplo_normal" class="sortable_exemplo">
                <li class="ui-widget-content">Item 1</li>
                <li class="ui-widget-content">Item 2</li>
                <li class="ui-widget-content">Item 3</li>
                <li class="ui-widget-content">Item 4</li>
                <li class="ui-widget-content">Item 5</li>
            </ol>
        </div>
        <div id="tab_sortable_placeholder">
            <pre>$("#meu_sortable").sortable({ placeholder: "ui-state-highlight" });</pre>
            <ol id="sortable_exemplo_placeholder" class="sortable_exemplo">
                <li class="ui-widget-content">Item 6</li>
                <li class="ui-widget-content">Item 7</li>
                <li class="ui-widget-content">Item 8</li>
                <li class="ui-widget-content">Item 9</li>
                <li class="ui-widget-content">Item 10</li>
            </ol>
        </div>
        <div id="tab_sortable_placeholder_force">
            <pre>$("#meu_sortable").sortable({ placeholder: "draggable_azul", forcePlaceholderSize: true });</pre>
            <ol id="sortable_exemplo_placeholder_force" class="sortable_exemplo">
                <li class="ui-widget-content">Item 11</li>
                <li class="ui-widget-content">Item 12</li>
                <li class="ui-widget-content">Item 13</li>
                <li class="ui-widget-content">Item 14</li>
                <li class="ui-widget-content">Item 15</li>
            </ol>
        </div>
        <div id="tab_sortable_grid">
            Isto daqui é apenas uma &lt;ol&gt; com um monte de &lt;li&gt;'s dentro. Cada &lt;li&gt; tem um style="float: left".
            O código é <code>$("#meu_selectable").sortable();</code>
            <ol id="sortable_exemplo_float" class="sortable_exemplo">
                <li class="ui-widget-content" style="float: left; width: 50px; margin-right: 5px">Item 1</li>
                <li class="ui-widget-content" style="float: left; width: 50px; margin-right: 5px">Item 2</li>
                <li class="ui-widget-content" style="float: left; width: 50px; margin-right: 5px">Item 3</li>
                <li class="ui-widget-content" style="float: left; width: 50px; margin-right: 5px">Item 4</li>
                <div style="clear: both" />
                <li class="ui-widget-content" style="float: left; width: 50px; margin-right: 5px">Item 5</li>
                <li class="ui-widget-content" style="float: left; width: 50px; margin-right: 5px">Item 6</li>
                <li class="ui-widget-content" style="float: left; width: 50px; margin-right: 5px">Item 7</li>
                <li class="ui-widget-content" style="float: left; width: 50px; margin-right: 5px">Item 8</li>
                <div style="clear: both" />
                <li class="ui-widget-content" style="float: left; width: 50px; margin-right: 5px">Item 9</li>
                <li class="ui-widget-content" style="float: left; width: 50px; margin-right: 5px">Item 10</li>
                <li class="ui-widget-content" style="float: left; width: 50px; margin-right: 5px">Item 11</li>
                <li class="ui-widget-content" style="float: left; width: 50px; margin-right: 5px">Item 12</li>
                <div style="clear: both" />
                <li class="ui-widget-content" style="float: left; width: 50px; margin-right: 5px">Item 13</li>
                <li class="ui-widget-content" style="float: left; width: 50px; margin-right: 5px">Item 14</li>
                <li class="ui-widget-content" style="float: left; width: 50px; margin-right: 5px">Item 15</li>
                <li class="ui-widget-content" style="float: left; width: 50px; margin-right: 5px">Item 16</li>
                <div style="clear: both" />
            </ol>
        </div>
        <div id="tab_sortable_delay">
            <pre>$("#meu_sortable").sortable({ delay: 1000 });</pre>
            <ol id="sortable_exemplo_delay" class="sortable_exemplo">
                <li class="ui-widget-content">Item 17</li>
                <li class="ui-widget-content">Item 18</li>
                <li class="ui-widget-content">Item 19</li>
                <li class="ui-widget-content">Item 20</li>
                <li class="ui-widget-content">Item 21</li>
            </ol>
        </div>
        <div id="tab_sortable_distance">
            <pre>$("#meu_sortable").sortable({ distance: 100 });</pre>
            <ol id="sortable_exemplo_distance" class="sortable_exemplo">
                <li class="ui-widget-content">Item 22</li>
                <li class="ui-widget-content">Item 23</li>
                <li class="ui-widget-content">Item 24</li>
                <li class="ui-widget-content">Item 25</li>
                <li class="ui-widget-content">Item 26</li>
            </ol>
        </div>
        <div id="tab_sortable_cancel">
            Isto daqui é apenas uma &lt;ol&gt; com um monte de &lt;li&gt;'s dentro. Os itens 28 e 30 têm a classe CSS "nao_sortable".
            Por causa da propriedade cancel, estes itens não podem ser selecionados para serem ordenados.
            <pre>$("#meu_sortable").sortable({ cancel: "nao_sortable" });</pre>
            <ol id="sortable_exemplo_cancel" class="sortable_exemplo">
                <li class="ui-widget-content">Item 27</li>
                <li class="ui-widget-content nao_sortable draggable_azul">Item 28</li>
                <li class="ui-widget-content">Item 29</li>
                <li class="ui-widget-content nao_sortable draggable_azul">Item 30</li>
                <li class="ui-widget-content">Item 31</li>
            </ol>
        </div>
        <div id="tab_sortable_items">
            <pre>$("#meu_sortable").sortable({ items: "li:not(.nao_sortable)" });</pre>
            <ol id="sortable_exemplo_items" class="sortable_exemplo">
                <li class="ui-widget-content">Item 32</li>
                <li class="ui-widget-content">Item 33</li>
                <li class="ui-widget-content nao_sortable draggable_azul">Item 34</li>
                <li class="ui-widget-content nao_sortable draggable_azul">Item 35</li>
                <li class="ui-widget-content">Item 36</li>
            </ol>
        </div>
        <div id="tab_sortable_connect">
            <pre>$("#meu_sortable1, #meu_sortable2").sortable({ connectWith: ".minha_classe" });</pre>
            <ol id="sortable_exemplo_connect1" class="sortable_exemplo sortable_conectado" style="float: left; width: 150px">
                <li class="ui-widget-content draggable_rosa">Item 37</li>
                <li class="ui-widget-content draggable_rosa">Item 38</li>
                <li class="ui-widget-content draggable_rosa">Item 39</li>
            </ol>
            <ol id="sortable_exemplo_connect2" class="sortable_exemplo sortable_conectado" style="float: left; width: 150px; margin-left: 5px">
                <li class="ui-widget-content draggable_azul">Item 40</li>
                <li class="ui-widget-content draggable_azul">Item 41</li>
                <li class="ui-widget-content draggable_azul">Item 42</li>
            </ol>
            <div style="clear: both" />
        </div>
    </div>

    <style type="text/css" rel="stylesheet">
        .sortable_exemplo { list-style-type: none; margin: 0; padding: 0; width: 60%; }
        .sortable_exemplo li { margin: 2px; padding: 3px; }
        .sortable_exemplo_float li { float: left; width: 80px; }
    </style>

    <script type="text/javascript">
        inicializador.sortableInit = function() {
            $("#tab_sortable").tabs();
            $("#sortable_exemplo_normal").sortable();
            $("#sortable_exemplo_placeholder").sortable({ placeholder: "draggable_azul" });
            $("#sortable_exemplo_placeholder_force").sortable({ placeholder: "draggable_azul", forcePlaceholderSize: true });
            $("#sortable_exemplo_float").sortable();
            $("#sortable_exemplo_delay").sortable({ delay: 1000 });
            $("#sortable_exemplo_distance").sortable({ distance: 100 });
            $("#sortable_exemplo_cancel").sortable({ cancel: ".nao_sortable" });
            $("#sortable_exemplo_items").sortable({ items: "li:not(.nao_sortable)" });
            $("#sortable_exemplo_connect1, #sortable_exemplo_connect2").sortable({ connectWith: ".sortable_conectado" });
            $("#tab_sortable_para_outra_aba").sortable({ connectWith: ".sortable_conectado_empty" });
        };
    </script>
</div>